<template>
	<view class="pics">
		<scroll-view class="left" scroll-y="true" >
			<view 
			@click="leftClickHandle(index,item.id)"
			:class="active===index?'active':''" 
			v-for="(item,index) in cates" 
			:key="item.id">{{item.title}}</view>
		</scroll-view>
		<scroll-view class="right" scroll-y="true" >
			<view class="item" v-for="item in secondDate" :key="item.id">
				<image @click="bigPics" :src="img"></image>
				<text>{{item.title}}</text>
			</view>
			<text v-if="secondDate.length===0">沒有數據</text>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cates:[],
				active:0,
				secondDate:[],
				img:"https://wx4.sinaimg.cn/mw690/734235e7gy1h8ob3wdymxj21o0280qv5.jpg"
			}
		},
		methods: {
			 async getPicsCate(){
				const res=await this.$myRequest({
					url:'api/getimgcategory'
				})
				this.cates=res.data.message
				this.leftClickHandle(0,this.cates[0].id)
			},
			
			async leftClickHandle(index,id){
				this.active=index
				// 獲取右側的數據
				const res=await this.$myRequest({
					url:'api/getimages/'+id
				})
				this.secondDate=res.data.message
			},
			
			bigPics(current){
				// 后台数据失效，显示不出来图片
				const urls=this.secondDate.map(item=>{
					return item.img_url
				})
				uni.previewImage({
					current,
					urls
				})
			}
		},
		
		onLoad() {
			this.getPicsCate()
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
	}
	.pics{
		height: 100%;
		display: flex;
		.left{
			width: 200rpx;
			height:100%;
			border-right: 1px solid #eee;
		view{
			height: 60px;
			line-height: 60px;
			color:#333;
			text-align:center;
			font-size: 30rpx;
			border-top: 1px solid #eee;
		}
		.active{
			background: $shop-color;
		}
	  }
	  .right{
		  height: 100%;
		  width: 520rpx;
		  margin: 10 auto;
		  .item{
			  image{
				  width: 520rpx;
				  height: 520rpx;
				  border-radius: 5px;
			  }
			  text{
				  font-size: 30rpx;
				  line-height: 60rpx;
			  }
		  }
	  }
	}
</style>
